<template>
    <div class="personal">
       <router-link to="/edit_profile">
           <div class="profile">
               <img  :src="userMessage.head_img | joinPath" alt />
               <div class="profile-center">
                   <div class="name">
                       <span class="iconfont" :class="[userMessage.gender? 'iconxingbienan':'iconxingbienv']"></span>{{userMessage.nickname}}
                   </div>
                   <div class="time">{{new Date(userMessage.create_date).toLocaleString()}}</div>
               </div>
               <span class="iconfont iconjiantou1"></span>
           </div>
       </router-link>
    <van-cell title="我的关注" is-link value="关注" @click="$router.push('/event-focus')"/>
    <van-cell title="我的跟帖" is-link value="跟帖" @click="$router.push('/comments-head')"/>
    <van-cell title="我的收藏" is-link value="文章" @click="$router.push('/collections')"/>
    <van-cell title="设置" is-link />
    <van-button color="#d3391f" block round @click="outFn">退 出</van-button>
    <van-tabbar route>
        <van-tabbar-item replace to="/index" icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item replace to="/rere" icon="bell">订阅</van-tabbar-item>
        <van-tabbar-item replace to="/personal" icon="manager">个人中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { userInfo } from "@/api/user"
export default {
    data(){
        return{
            userMessage:{}
        }
    },
    created(){
        let id=localStorage.getItem('Account')
        userInfo(id).then((res)=>{
            this.userMessage=res.data.data
        })
    },
    methods:{
        outFn(){
            localStorage.removeItem('Token')
            localStorage.removeItem('Account')
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="less" scoped>
.van-cell{
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}
.van-button{
    width: 90%;
    margin: 20px auto;
}
.personal{
    width: 100vw;
    height: 100vh;
    background-color: #eee;
}
a{
    color: #666;
}
.profile {
  display: flex;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: (70 / 360) * 100vw;
    height: (70 / 360) * 100vw;
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    span {
      color: #75b9eb;
    }
  }

  .time {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>